<template>
  <div>
    <el-alert effect="dark" title="密码更新成功后需要重新登录。" type="warning" show-icon :closable="false"/>
    <el-form class="app-margin-top-small" :model="FormValue" label-width="100px">
      <el-form-item label="登录账号" prop="userPassword">
        <el-input disabled :value="gstore.account"></el-input>
      </el-form-item>
      <el-form-item label="当前密码" prop="password" class="is-required">
        <el-input v-model.trim="FormValue.old_password" maxlength="30" show-word-limit placeholder="请输入当前密码"></el-input>
        <p class="app-form-create-hint">必须提供当前登录用户密码才能进行更改</p>
      </el-form-item>
      <el-form-item label="新密码" prop="password" class="is-required">
        <el-input v-model.trim="FormValue.password" maxlength="30" show-word-limit placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="password2" class="is-required">
        <el-input v-model.trim="FormValue.password2" maxlength="30" show-word-limit placeholder="请再次输入新密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="savePassword">修改密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue"
import guardStore from "@/apps/admin/store/guard"
import store from "@/store/index"
import {editUserPasswdApi} from "@/apps/admin/api/common";
import bus from "@/units/bus";
import {ElMessage} from "element-plus";
import {useCloseMessageBox} from "@/hooks/DialogMsg"

const gstore = guardStore(store)

/**
 * 修改密码表单
 */
const FormValue = ref({
  old_password: "",
  password: "",
  password2: ""
})


/**
 * 关闭弹窗
 */
const close = useCloseMessageBox()


/**
 * 确认修改密码
 */
function savePassword() {
  editUserPasswdApi(FormValue.value).then(result => {
    if (result.code === 200) {
      ElMessage.success('密码修改成功，请重新登录！')
      bus.emit('user-logout', undefined)
      close()
    }
  })
}
</script>

<style scoped lang="scss">

</style>